<template>
  <div class="settings">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>系统设置</span>
        </div>
      </template>

      <!-- 系统设置 -->
      <el-form label-width="120px">
        <el-form-item label="导航模式">
          <el-radio-group v-model="userStore.userInfo.navigation">
            <el-radio-button label="side">
              <el-icon><Menu /></el-icon>
              侧边栏
            </el-radio-button>
            <el-radio-button label="top">
              <el-icon><TopRight /></el-icon>
              顶部栏
            </el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="系统语言">
          <el-select
            v-model="userStore.userInfo.language"
            @change="userStore.setLanguage"
          >
            <el-option label="简体中文" value="zh" />
            <el-option label="English" value="en" />
            <el-option label="日本語" value="ja" />
          </el-select>
        </el-form-item>

        <el-form-item label="消息通知">
          <el-switch v-model="notifications" />
        </el-form-item>
        <!-- //保存设置 -->
        <el-form-item>
          <el-button size="large" @click="saveSettings" type="primary"
            >保存设置</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import { useUserStore } from "@/store/user";
import { Menu, TopRight } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

const { locale } = useI18n();
const userStore = useUserStore();
const notifications = ref(true);

const saveSettings = async () => {
  // 保存设置
  const res = await userStore.saveUserInfoAction();
  if (res) {
    ElMessage.success("设置保存成功");
  }
};
</script>

<style lang="scss" scoped>
.settings {
  padding: 20px;

  .mt-4 {
    margin-top: 1rem;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
